<template>
	<Echart :options="options" class="left_center_inner" ref="daycharts" />
</template>

<script>
export default {
	props: ['info'],
	data() {
		return {
			options: {},
		}
	},
	watch: {
		info: {
			handler(newValue, oldValue) {
				this.init()
			},
			deep: true,
		},
	},
	mounted() {},
	beforeDestroy() {},
	methods: {
		init() {
			let self = this
			this.options = {
				series: [
					{
						type: 'gauge',
						startAngle: 200,
						endAngle: -20,
						center: ['50%', '55%'],
						radius: '90%',
						min: self.info.minVal,
						max: self.info.maxVal,
						splitNumber: 5, //分隔份数
						axisLine: {
							lineStyle: {
								width: 6,
								color: [
									[0.25, '#7CFFB2'],
									[0.5, '#58D9F9'],
									[0.75, '#FDDD60'],
									[1, '#FF6E76'],
								],
							},
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '28%',
							width: 10,
							offsetCenter: [0, '-60%'],
							itemStyle: {
								color: 'auto',
							},
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							//文字样式（及“10”、“20”等文字样式）
							show: false,
						},
						splitLine: {
							show: false,
						},
						detail: {
							fontSize: 13,
							// offsetCenter: [0, '-35%'],
							valueAnimation: true,
							formatter: function (value) {
								return self.info.names + '\n ' + value + 'MWh'
							},
							color: 'inherit',
						},
						data: [
							{
								value: self.info.val,
							},
						],
					},
				],
			}
		},
	},
}
</script>
<style lang="scss" scoped></style>
